$(function () {
  var $img = $(".form-item .captcha-graph-img img");  // 获取图像标签
  var $username = $("#user_name");  // 获取注册页面html的注册username标签   id标签(唯一)需用#表示   . 为class标签

  var sImageCodeId = "";  // 定义图像验证码ID值

  // 生成图像验证码图片
  generateImageCode();
  $img.click(generateImageCode);  // 点击图片验证码生成新的图片验证码图片

  // 2、用户名验证逻辑
  $username.blur(function () {     // blur 光标移出事件
    fn_check_username();             // 光标移动事件触发就调用fn_check_name函数, fn_ 前段函数命名规范
  });

  // 生成图片UUID验证码
  function generateUUID() {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }

  // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
  function generateImageCode() {
    // 1、生成一个图片验证码随机编号
    sImageCodeId = generateUUID();
    // 2、拼接请求url /image_codes/<uuid:image_code_id>/
    var imageCodeUrl = "/image_codes/" + sImageCodeId + "/";   // 注意一定要加/
    // 3、修改验证码图片src地址
    $img.attr('src', imageCodeUrl) ; // 将img的src属性设置/更改为imageCodeUrl
      // attr为attribute的缩写,属性
  }

   // 判断用户名是否已经注册
  function fn_check_username() {
    var sUsername = $username.val();  // 获取/定义用户名字符串
    if (sUsername === "") {            // 如果为空
     //message.showError('用户名不能为空！');
      alert('用户名不能为空');
      return
    }
    if (!(/^\w{5,20}$/).test(sUsername)) {           // 前端匹配 ^ 开头  $ 结尾   20之前不能有空格,否则报错
      //message.showError('请输入5-20个字符的用户名');
      alert('请输入5-20个字符的用户名');
      return
    }

    // 向后端发送ajax异步请求，去后端查询用户名是否存在
    $.ajax({
      url: '/usernames/' + sUsername + '/',   // sUsername为前端的用户名, url的username参数
      type: 'GET',
      dataType: 'json',      // 可以用contentType
    })
      .done(function (res) {      // done 如果ajax请求成功
        if (res.count !== 0) {    //不等于0,就是已经存在
          //message.showError(res.data.username + '已注册，请重新输入！')
            alert (res.username + '已注册，请重新输入！');
        } else {
          //message.showInfo(res.data.username + '能正常使用！')
            alert(res.username + '能正常使用！');
        }
      })
      .fail(function () {    // 如果ajax请求失败
        //message.showError('服务器超时，请重试！');
          alert('服务器超时，请重试！');
      });
  }

});